<script setup>
import titlebg1 from '@/assets/img/titlebg/titlebg1.webp'
import teacher1 from '@/assets/img/team/teacher1.webp'
import teacher2 from '@/assets/img/team/teacher2.webp'
import teacher3 from '@/assets/img/team/teacher3.webp'
import teacher4 from '@/assets/img/team/teacher4.webp'
</script>
<template>
<img src="@/assets/img/team/team.webp" class="header-bg">
<section class="team section">
    <div class="team-container container">
        <el-header>
            <el-image :src="titlebg1" class="titlelogo" />
            <h2 class="title">学员成果</h2>
            <div class="subtitle">
                百里挑一的好老师
            </div>
        </el-header>
        <main class="team-content">
            <el-card>
                <div class="img-box">
                    <img :src="teacher1" />
                </div>

                <div class="text-box">
                    <header class="name-position">
                        <span class="name">
                            吴老师&nbsp;
                        </span>
                        <span class="position">
                            教学总监
                        </span>
                    </header>
                    <div class="desc">
                        <span>
                            初、高中计算机专业学科认证教师，高软件开发工程师，4年以上软件开发以及软件教育任教经验，
                            精通Java、Python以及web等多门开发语言，具备丰富的项目开发经验。
                        </span>
                    </div>
                </div>
            </el-card>

            <el-card>
                <div class="img-box">
                    <img :src="teacher2" />
                </div>
                
                <div class="text-box">
                    <header class="name-position">
                        <span class="name">
                            黄老师&nbsp;
                        </span>
                        <span class="position">
                            教学主管
                        </span>
                    </header>
                    <div class="desc">
                        <span>
                            对技术的讲解十分透彻，精通JAVA，Python，Scratch等开发语言，
                            拥有丰富的学生编程教育经验，上课风格细致幽默创新，着重蒙氏教育
                            理念，思维严谨。 
                        </span>
                    </div>
                </div>
            </el-card>

            <el-card>
                <div class="img-box">
                    <img :src="teacher3" />
                </div>
                
                <div class="text-box">
                    <header class="name-position">
                        <span class="name">
                            周老师&nbsp;
                        </span>
                        <span class="position">
                            教学主管
                        </span>
                    </header>
                    <div class="desc">
                        <span>
                            精通scratch，JavaScript，python等开发语言，拥有4年少儿编程教育经验，课堂氛围活跃积极，讲解细致入微，主次分明。 
                        </span>
                    </div>
                </div>
            </el-card>

            <el-card>
                <div class="img-box">
                    <img :src="teacher4" />
                </div>
                
                <div class="text-box">
                    <header class="name-position">
                        <span class="name">
                            黄老师&nbsp;
                        </span>
                        <span class="position">
                            教学主管
                        </span>
                    </header>
                    <div class="desc">
                        <span>
                            九年IT教育培训及软件开发经验，软件工程师认证，精通python、
                            java等开发语言，具备丰富的项目开发经验。授课风格思路清晰，方法简单易懂，广受家长喜爱。 
                        </span>
                    </div>
                </div>
            </el-card>
        </main>
    </div>
</section>
</template>
<style lang="scss" scoped>
.header-bg {
    width: 100%;
    height: 300px;
    background-repeat: no-repeat;
}

.team-content {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 2rem;
}

.el-card {
    :deep() {
        .el-card__body {
            display: flex;
            gap: 2rem;
        }
    }
}

.name {
    font-size: 24px;
    color: rgb(53, 53, 53);
}

.position {
    font-size: 14px;
    color: rgb(153, 153, 153);
}

.desc {
    font-size: 14px;
    line-height: 30px;
    color: rgb(102, 102, 102);
    margin-top: 2rem;
}
</style>